<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统一登录页面</title>
    <link href="../css/bootstrap5.3.min.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>

<body>
    <div class="container">
        <!--        header 头部导航栏-->
        <div id="my_header" class="col-sm-6"> </div>

        <div id="wechart">

            <h2 class="page-header" class="col-sm-6">
                统一登录或者退出登录页面
            </h2>
            <!-- 登陆框 -->
            <div id="login_div" v-if="no_login" class="col-sm-6">
                <div class="mb-4 row">
                    <label for="name" class="col-sm-4 col-form-label">用户名:</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" id="name" v-model="name" required>
                    </div>
                </div>
                <div class="mb-4 row ">
                    <label for="pwd" class="col-sm-4 col-form-label">密码:</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="password" id="pwd" v-model="pwd" required>
                    </div>
                </div>
                <div class="row  mb-3">
                    <div class="col-sm-2"></div>
                    <div class="form-check col-sm-10">
                        <input class="form-check-input" type="checkbox" v-model="save_pwd" id="save_pwd">
                        <label class="form-check-label" for="save_pwd">保存密码？</label>
                    </div>
                </div>
                

                <div class="row">
                    <span class="col-sm-1 col-1"></span>
                    <button type="button" class="btn btn-success col-sm-3 col-3" @click="login">登陆</button>
                    <span class="col-sm-1 col-1"></span>
                    <button type="button" class="btn btn-secondary col-sm-3 col-3" @click="register">注册</button>
                </div>
            </div>

            <div id="logout_div" v-else="no_login">
                <button @click="logout" type="button" class="btn btn-danger">退出登录</button>
            </div>

        </div>
    </div>
</body>

<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        $("#my_header").load("../index_header.html");
    });
    function showmess(mess) {
        let div = $("<div class=mymess>" + mess + "</div>");
        $("body").append(div);

        let intv = setInterval(() => {
            let top = div.css("top");
            top = parseInt(top.split("px")[0]);
            if (top > 500) {
                div.remove();
                clearInterval(intv);
            }
            div.css("top", (top + 5) + "px");
            div.css("opacity", 1 - (top / (800.0)));
        }, 17);
    }

    var app = new Vue({
        el: "#wechart",
        data() {
            return {
                save_pwd: false, //是否保存密码
                token: "",
                uid: '',
                name: "",
                pwd: '',
                mess: '这是消息窗口',
                api_addr: "",
                no_login: true
            };
        },
        methods: {
            get_my_info() {
                axios.get(this.api_addr + "get_my_info?time=" + Math.random())
                    .then(response => {
                        // 请求成功处理
                        //console.log(response.data);
                        if (response.data.res == "Y") {
                            showmess("你已经登录");
                            this.no_login = false;
                        } else {
                            showmess("你未登录");
                            this.no_login = true;
                            this.read_local();
                        }
                    })
                    .catch(error => {
                        // 请求失败处理
                        alert("catch error");
                        this.no_login = true;
                        console.error(error);
                    });
            },
            read_local() {
                // 读取： wechart_user wechart_pwd
                let wechart_user = localStorage.getItem("wechart_user");
                if (wechart_user) {
                    this.name = wechart_user;
                    this.pwd = localStorage.getItem("wechart_pwd");
                    this.save_pwd = localStorage.getItem("wechart_savepwd");
                }
            },
            logout() {
                axios.get(this.api_addr + "logout")
                    .then(response => {
                        // 请求成功处理
                        console.log(response.data);
                        if (response.data == "Y") {
                            showmess("你已经退出登录");
                            this.no_login = true;
                            this.read_local();
                        } else {
                            showmess("退出失败");
                            this.no_login = false;
                        }
                    })
                    .catch(error => {
                        // 请求失败处理
                        alert("catch error");
                        this.no_login = true;
                        console.error(error);
                    });
            },
            login() {
                // 保存或者删除密码 token, uid  保存： 'wechart_user'  'wechart_pwd'  'wechart_savepwd'
                if (this.save_pwd) {
                    localStorage.setItem('wechart_user', this.name);
                    localStorage.setItem('wechart_pwd', this.pwd);
                    localStorage.setItem('wechart_savepwd', this.save_pwd);
                } else {
                    try {
                        localStorage.removeItem('wechart_user');
                        localStorage.removeItem('wechart_pwd');
                        localStorage.removeItem('wechart_savepwd');
                    } catch (e) {

                    }
                }
                const formData = new FormData();
                formData.append('name', this.name);
                formData.append('pwd', this.pwd);
                // 使用axios发送GET请求
                axios.post(this.api_addr + "login", formData // 将数据作为查询参数发送
                    , {
                        headers: {
                            'Content-Type': 'multipart/form-data' // 设置请求头
                        }
                    })
                    .then(response => {
                        // 请求成功处理  
                        console.log(response.data);

                        if (response.data.res == "succ") {
                            showmess("登陆成功");
                            if (response.data.url) {
                                window.location.href = response.data.url
                            } else {
                                window.location.href = "../index.html"
                            }

                        } else if (response.data.res == "no") {
                            showmess("用户不存在");
                        } else {
                            showmess("登陆密码错误");
                        }
                    })
                    .catch(error => {
                        // 请求失败处理  
                        alert("catch error");
                        console.error(error);
                    });
            },
            register() {
                // 使用axios发送GET请求  
                axios.get(this.api_addr + "register", {
                    params: {
                        'name': this.name,
                        'pwd': this.pwd
                    }, // 将数据作为查询参数发送  
                })
                    .then(response => {
                        // 请求成功处理  
                        console.log(response.data);
                        if (response.data == "succ") {
                            showmess("注册成功");
                        } else {
                            showmess("注册失败");
                        }
                    })
                    .catch(error => {
                        // 请求失败处理  
                        alert("catch error");
                        console.error(error);
                    });
            },
        },
        mounted() {

            this.get_my_info();

        },
        beforeDestroy() {

        }
    });




</script>
<style>
    .mymess {
        left: 100px;
        top: 50px;
        position: fixed;
        border: 1px solid #e9c5c5;
        border-radius: 5px;
        text-align: center;
        padding: 10px;
        width: 350px;
        font-size: large;
        color: aliceblue;
        background-color: #000000;
        opacity: 1;
    }
</style>

</html>